<template>
    <div class="login-panel">
        <!--顶部的标题-->
        <h1 class="title">后台管理系统</h1>
        <div class="tabs">
            <el-tabs type="border-card" v-model="activeName" :stretch="true" class="demo-tabs tabs">
                <el-tab-pane name="account">
                    <template #label>
                        <div class="label">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span class="tex`t">帐号登录</span>
                        </div>
                    </template>
                    <panelAccount ref="accountRef" />
                </el-tab-pane>
                <el-tab-pane name="phone">
                    <template #label>
                        <div class="label">
                            <el-icon>
                                <Iphone />
                            </el-icon>
                            <span class="text">手机登录</span>
                        </div>
                    </template>
                    <panelPhone></panelPhone>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!--底部区域-->
        <div class="control-account">
            <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
            <el-link type="primary" :underline="false">忘记密码</el-link>
        </div>
        <el-button class="login-btn" type="primary" size="large" @click="handleLoginBtnClick">立即登录</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import panelAccount from './panel-account.vue'
import panelPhone from './panel-phone.vue'
import type PanelAccount from './panel-account.vue'
import { localCache } from '@/utils/cache'
const activeName = ref('account')
const isRemPwd = ref<boolean>(localCache.getCache('isRemPwd') ?? false)

watch(isRemPwd, (newVal) => {
    localCache.setCache('isRemPwd', newVal)
})

const accountRef = ref<InstanceType<typeof PanelAccount>>()
function handleLoginBtnClick() {
    if (activeName.value == "account") {
        //1.获取子组件实例
        accountRef.value?.loginAction(isRemPwd.value)
    } else {
        console.log('用户手机登录')
    }
}
</script>
<style lang="less" scoped>
.login-panel {
    width: 330px;
    // margin-bottom: 80px;
    padding: 16px;
    background: #fcd3d3;

    .title {
        text-align: center;
        margin-bottom: 15px;
        color: #eb8080;
    }

    .label {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text {
        margin-left: 5px;
    }

    .control-account {
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
    }

    .login-btn {
        margin-top: 10px;
        width: 100%;
    }
}
</style>
